<template>
  <div class="listTemplate">
    <section class="t-body" >
      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <section v-for="(i,index) in datas" :key="index">
              <mu-paper :z-depth="2">
                <div class="card">
                  <section class="tit">
                    <span class="tag">{{i.problemLevel | status}}</span><!--问题类型-->
                    <span class="tag-question">{{i.status | translate}}</span><!--整改类型-->
                  </section>
                  <div class="t-con"  @click="problemDetail(i.problemId)" >
                    <div class="outline">
                      <span class="outline_name">检查部位：</span>
                      <span class="outline_con">{{ i.checkParts || '---' }}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">问题描述：</span>
                      <span class="outline_con">{{i.problemDescription || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">检查人：</span>
                      <span class="outline_con">{{i.checkUserName || '---'}}</span>
                    </div>
                    <div class="outline">
                      <span class="outline_name">整改期限：</span>
                      <span class="outline_con">{{i.endTime || '---'}}</span>
                    </div>
                  </div>
                  <!--<div  class="lan-card-footer" style="justify-content: flex-end" >
                    <div class="lan-btn big default" @click="gotips(i)">
                      生成整改通知单
                    </div>
                  </div>-->
                </div>
              </mu-paper>
            </section>
          </mu-list>
        </mu-load-more>
      </mu-container>
      <NoData v-if="!datas.length"/>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'mainPage',
    data () {
      return {
        refreshing: false,
        loading: false,
      }
    },
    mounted () {
    },
    created () {
      console.log(this.$A.GUP())
    },
    filters:{
      translate (rows) {
        if (rows == 0) {
          return '整改中'
        } else if (rows == 1) {
          return '待复查'
        } else if (rows == 2) {
          return '已整改'
        }
      },
      status (val) {
        if (val===1) {
          return '一般问题'
        }else if(val===2){
          return '较大问题'
        }else if (val===3) {
          return '重大问题'
        }
      }
    },
    props:{
      datas:{
        type:Array,
      }
    },
    methods: {
      gotips(item){
        this.$router.push({
          path: '/Totips',
          query: {
            problemId: item.problemId
          }
        });
      },
      problemDetail (val) {
        // console.log(val);
        this.$router.push(
          {
            path: '/accountDetaildf',
            query: {
              info: val,
            }
          });
      },

      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.$emit('getData')
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$emit('getData')
        }, 2000)
      }
    },
  }
</script>
<style lang="scss" scoped>
  .listTemplate {
    height: 100%;
    overflow: auto;
    .card {
      margin: 0.12rem;
      .tit {
        display: flex;
        justify-content: space-between !important;
        border-bottom:0.01rem dashed #E0E0E0;
        padding:0.12rem;
        .tag {
          width: fit-content;
          height: fit-content;
          padding: 0.06rem;
          background-color: white;
          border-radius: 0.02rem;
          font-size: 0.12rem;
          line-height: 0.12rem;
          color: #0095FF;
        }
        .tag-question {
          font-size: 0.13rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 149, 255, 1);
          line-height: 0.18rem;
        }
        .active0 {
          color: #389D2B;
        }
        .active1 {
          color: #0095FF;
        }
        .active2 {
          color: #FF8A1B;
        }
      }
      .t-con{
        padding: 0.12rem;
        .outline {
          padding: 0.05rem 0;
          .outline_name {
            font-size: 0.15rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 0.21rem;
          }
          .outline_con {
            font-size: 0.15rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(61, 61, 61, 1);
            line-height: 0.21rem;
          }
        }
      }
    }
  }
</style>
